<template>
    <div>
        <div>
            <el-card style="height: 800px">
                <el-button class="btn" type="primary" size="small" @click="openAddMenu"><i class="el-icon-plus"></i>
                    新增菜单
                </el-button>
                <div>
                    <el-table
                            :data="menuData"
                            height="800"
                            border
                            row-key="id"
                            style="width: 100%"
                            :cell-style="{ 'text-align': 'center' }"
                            :header-cell-style="{ 'text-align': 'center' }"
                            :tree-props="{ children: 'childrenMenus' }"
                    >
                        <el-table-column prop="name" label="菜单名称" width="180"></el-table-column>
                        <el-table-column prop="icon" label="图标" min-width="90">
                            <template slot-scope="scope">
                                <i :class="scope.row.icon" style="font-size: 25px"></i>
                            </template>
                        </el-table-column>
                        <el-table-column prop="path" label="组件路径" min-width="200"></el-table-column>
                        <el-table-column prop="permission" label="权限标识" min-width="200"></el-table-column>
                        <el-table-column prop="type" label="类型" min-width="200">
                            <template slot-scope="scope">
                                <el-tag>{{
                                    scope.row.type == "0" ? "左菜单" : scope.row.type == "1" ? "按钮" : "接口资源"
                                    }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" label="排序" min-width="50">
                            <template slot-scope="scope">
                                <el-tag>{{ scope.row.sort }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="200">
                            <template slot-scope="scope">
                                <el-link
                                        type="success"
                                        class="btn"
                                        icon="el-icon-plus"
                                        @click="addDialogVisible = true"
                                >
                                    新增
                                </el-link>
                                <el-link type="primary" class="btn" icon="el-icon-edit" @click="openEditMenu(scope.row)"
                                >编辑
                                </el-link>
                                <el-link type="danger" class="btn" icon="el-icon-delete" @click="removeMenu(scope.row)"
                                >删除
                                </el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <el-dialog
                        title="新增菜单"
                        :visible.sync="addDialogVisible"
                        :before-close="addCloseHandler"
                        @close="closeDialog"
                        width="50%"
                >
                    <el-form label-position="left" label-width="100px" size="small">
                        <el-form-item label="菜单类型">
                            <el-radio-group v-model="type">
                                <el-radio-button label="左菜单"></el-radio-button>
                                <el-radio-button label="按钮"></el-radio-button>
                                <el-radio-button label="接口资源"></el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="菜单名称">
                            <el-input v-model="MenuForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="图标">
                            <el-input @focus="iconDialogVisible = true" v-model="MenuForm.icon"></el-input>
                        </el-form-item>
                        <el-form-item label="组件路径" v-if="type == '左菜单'">
                            <el-input v-model="MenuForm.path"></el-input>
                        </el-form-item>
                        <el-form-item label="权限标识" v-if="type == '按钮' || type == '接口资源'">
                            <el-input v-model="MenuForm.permission"></el-input>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input-number
                                    v-model="sort"
                                    controls-position="right"
                                    :min="1"
                                    :max="1000"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="父组件ID">
                            <el-select v-model="treeName" placeholder="请选择">
                                <el-option :key="treeName" :value="treeName" hidden></el-option>
                                <el-tree :data="menuData" :props="defaultProps" accordion @node-click="handleNodeClick">
                                </el-tree>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
						<el-button size="mini" @click="addCloseHandler">取 消</el-button>
						<el-button size="mini" type="primary" @click="craeteMenu">确 定</el-button>
					</span>
                </el-dialog>
                <el-dialog
                        title="编辑菜单"
                        :visible.sync="editDialogVisible"
                        :before-close="editCloseHandler"
                        @close="closeDialog"
                        width="50%"
                >
                    <el-form label-position="left" label-width="100px" size="small">
                        <el-form-item label="菜单类型">
                            <el-radio-group v-model="type" @change="changeType">
                                <el-radio-button label="左菜单"></el-radio-button>
                                <el-radio-button label="按钮"></el-radio-button>
                                <el-radio-button label="接口资源"></el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="菜单名称">
                            <el-input v-model="MenuForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="图标">
                            <el-input @focus="iconDialogVisible = true" v-model="MenuForm.icon"></el-input>
                        </el-form-item>
                        <el-form-item label="组件路径" v-if="type == '左菜单'">
                            <el-input v-model="MenuForm.path"></el-input>
                        </el-form-item>
                        <el-form-item label="权限标识" v-if="type == '按钮' || type == '接口资源'">
                            <el-input v-model="MenuForm.permission"></el-input>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input-number
                                    v-model="sort"
                                    controls-position="right"
                                    :min="1"
                                    :max="1000"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="父组件ID">
                            <el-select v-model="treeName" placeholder="请选择">
                                <el-option :key="treeName" :value="treeName" hidden></el-option>
                                <el-tree
                                        :data="treeMenuData"
                                        :props="defaultProps"
                                        accordion
                                        @node-click="handleNodeClick"
                                >
                                </el-tree>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
						<el-button size="mini" @click="addDialogVisible = false">取 消</el-button>
						<el-button size="mini" type="primary" @click="editMenu">确 定</el-button>
					</span>
                </el-dialog>

                <el-dialog title="阿里icon图标库" :visible.sync="iconDialogVisible" width="50%">
                    <div class="iconList">
                        <div v-for="icon in iconList">
                            <i :class="icon" @click="checked(icon)"></i>
                        </div>
                    </div>
                </el-dialog>
            </el-card>
        </div>
    </div>
</template>

<script>
    import {deleteMenu, findAllMenu, saveMenu, updateMenu} from "../../../api/admin/permissions/menu"
    import {iconList} from "../../../config/icon"

    import {mapState, mapActions} from "pinia" // 引入映射函数
    import useStore from "@/store/index.js"

    export default {
        data() {
            return {
                iconDialogVisible: false,
                sort: 1,
                type: "左菜单",
                menuData: [],
                treeMenuData: [
                    {
                        name: "根目录",
                        childrenMenus: [],
                        id: "0",
                    },
                ],
                addDialogVisible: false,
                editDialogVisible: false,
                MenuForm: {
                    name: "",
                    permission: "",
                    path: "",
                    sort: "",
                    type: "",
                    parentId: null,
                    icon: "",
                },
                treeName: "",
                iconList: [],
                defaultProps: {
                    children: "childrenMenus",
                    label: "name",
                },
            }
        },
        created() {
            this.init()
            this.iconList = iconList
        },
        computed: {
            ...mapState(useStore, ["router"]),
        },
        methods: {
            openAddMenu() {
                this.addDialogVisible = true
                if (this.MenuForm.type === "0") {
                    this.type = "左菜单"
                } else if (this.MenuForm.type === "1") {
                    this.type == "按钮"
                } else if (this.MenuForm.type === "2") {
                    this.type == "接口资源"
                }
            },
            craeteMenu() {
                if (this.type == "左菜单") {
                    this.MenuForm.type = "0"
                } else if (this.type == "按钮") {
                    this.MenuForm.type = "1"
                } else if (this.type == "接口资源") {
                    this.MenuForm.type = "2"
                }
                this.MenuForm.sort = this.sort
                saveMenu(this.MenuForm).then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success("新增菜单成功")
                        this.addDialogVisible = false
                        this.init()
                    } else {
                        this.$message.error("新增菜单失败")
                        this.addDialogVisible = false
                    }
                })
            },
            /**
             * 初始化
             */
            init() {
                findAllMenu().then((res) => {
                    this.menuData = res.data.data
                    res.data.data.forEach((item) => {
                        this.treeMenuData[0].childrenMenus.push(item)
                    })
                    this.changeStoreRouter()
                })
            },
            /**
             * 删除
             */
            removeMenu(row) {
                deleteMenu(row.id).then((res) => {
                    if (res.data.code == 200) {
                        this.init()
                        this.$message.success("删除菜单成功")
                    } else {
                        this.$message.error("删除菜单失败")
                    }
                })
            },
            /*
                修改仓库里菜单缓存
            */
            changeStoreRouter(router) {
            },
            addCloseHandler() {
                this.addDialogVisible = false
                this.MenuForm = {}
            },
            editCloseHandler() {
                this.editDialogVisible = false
                this.MenuForm = {}
            },
            openEditMenu(row) {
                this.editDialogVisible = true
                this.MenuForm = row
                this.sort = row.sort
            },
            editMenu() {
                if (this.type == "左菜单") {
                    this.MenuForm.type = "0"
                } else if (this.type == "按钮") {
                    this.MenuForm.type = "1"
                } else if (this.type == "接口资源") {
                    this.MenuForm.type = "2"
                }
                this.MenuForm.sort = this.sort
                updateMenu(this.MenuForm).then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success("编辑菜单成功")
                        this.editDialogVisible = false
                        this.init()
                    } else {
                        this.$message.error("编辑菜单失败")
                        this.editDialogVisible = false
                    }
                })
            },
            // 切换菜单类型，进行数据重载
            changeType(e) {
                this.MenuForm.permission = ""
            },
            checked(icon) {
                this.MenuForm.icon = icon
                this.iconDialogVisible = false
            },
            handleNodeClick(data) {
                this.$nextTick(() => {
                    this.treeName = data.name
                    this.MenuForm.parentId = data.id
                })
            },
            // 关闭菜单弹窗 还原数据
            closeDialog() {
                this.MenuForm = {
                    name: "",
                    permission: "",
                    path: "",
                    sort: "",
                    type: "",
                    parentId: null,
                    icon: "",
                }
                this.treeName = ""
            },
        },
    }
</script>

<style lang="scss" scoped>
    .iconList {
        display: flex;

        div:hover {
            transform: scale(1.2);
        }

        i {
            font-size: 30px;
            cursor: pointer;
        }

    }

    .btn {
        margin-bottom: 15px;
    }
</style>
